<template>

  <el-dialog
      v-model="props.departmentData.dialogVisible"
      :title="props.departmentData.transition===0?'新增':'修改'"
      width="30%"
      :before-close="handleClose"
  >
   <div>
     部门名称：<el-input style="width: 300px" v-model="props.departmentData.departmentData.departmentName"/>
   </div>
    <div>
      部门备注：<el-input v-model="props.departmentData.departmentData.depatmentContent"/>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="departmentInsertMethod()">确定</el-button>
        <el-button type="primary" @click="props.departmentData.dialogVisible = false">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from "axios";
import {useRouter} from "vue-router";
const router=useRouter()
const dialogVisible = ref(false)
const props =defineProps({
  departmentData:{
    type:Object
  }
})
//新增的部门数据
//确认的方法
const departmentInsertMethod = ()=>{
  if(  props.departmentData.transition==0){
    //新增
    const url = "http://localhost:1688/department_con/insertDepartment"
    const departmentData=props.departmentData.departmentData
    axios.post(url,departmentData).then(data=>{
      console.log(data,"新增成功")
      const val =data.data;
      console.log(val)
      if(val.code==403){
        ElMessage.error("权限不足")
      }else {
        console.log(data)
        router.go(0);
      }

    })
  }else{
    //修改
    const url = "http://localhost:1688/department_con/updateDepartment"
    const departmentData=props.departmentData.departmentData
    console.log(departmentData)
    axios.put(url,departmentData).then(data=>{
      const val =data.data;
      console.log(val)
      if(val.code==403){
        ElMessage.error("权限不足")
      }else {
        console.log(data)
        router.go(0);
      }

      console.log(data,"修改成功")
    })

  }

  props.departmentData.dialogVisible = false
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('\'你是否关闭\'Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
